<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件测试</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .img{
            width: 32px;
            height: 32px;
            position: absolute;
        }
    </style>
</head>
<body>
    <img src="img/right.png" alt="" class="img" id="img">
    <script>
        window.onload = function(){
            var ismove = "";
            var img = document.getElementsByClassName("img")[0];
            var width = getWidth();
            var height = getHeight();
            document.onkeydown = function(e){
                e = e || event;
                // console.log(e.keyCode) //获取键盘编码
                if(e.keyCode == 37 || e.keyCode == 65){
                    ismove = "left";
                }
                else if(e.keyCode == 38 || e.keyCode == 87){
                    ismove = "top";
                }
                else if(e.keyCode == 39 || e.keyCode == 68){
                    ismove = "right";
                }
                else if(e.keyCode == 40 || e.keyCode == 83){
                    ismove = "bottom";
                }
            }
            document.onkeyup = function(){
                ismove = "";
            }
            var timer = setInterval(function(){
                switch(ismove){
                    case "left":
                        img.style.left = img.offsetLeft - 3 +"px";
                        img.src = "./img/left.png";
                        break;
                    case "right":
                        img.style.left = img.offsetLeft + 3 +"px";
                        img.src = "./img/right.png";
                        break;    
                    case "top":
                        img.style.top = img.offsetTop - 3 +"px";
                        img.src = "./img/top.png";
                        break;
                    case "bottom":
                        img.style.top = img.offsetTop + 3 +"px";
                        img.src = "./img/down.png";
                        break;            
                }
                if(img.offsetLeft<=0){
                    img.style.left = "0px"
                }
                if(img.offsetTop<=0){
                    img.style.top = "0px"
                }
                if(img.offsetLeft>=width - img.offsetWidth){
                    img.style.left = width - img.offsetWidth + "px"
                }
                if(img.offsetTop>=height - img.offsetHeight){
                    img.style.top = height - img.offsetHeight + "px"
                }
            }, 10);
            // 获取页面可视区宽高  兼容所有浏览器 （简写）
            function getWidth(){
                return window.innerWidth || document.compatMode == CSS1Compat ? document.documentElement.clientWidth : document.body.clientWidth;
            }
            function getHeight(){
                return window.innerHeight || document.compatMode == CSS1Compat ? document.documentElement.clientHeight : document.body.clientHeight;
            }
            // 获取页面可视区宽高  兼容所有浏览器
            // function getWidth(){
            //     if(window.innerWidth){
            //         return window.innerWidth;
            //     }
            //     else{
            //         if(document.compatMode == "CSS1Compat"){
            //             return document.documentElement.clientWidth;
            //         }
            //         else{
            //             return document.body.clientWidth;
            //         }
            //     }
            // }
            // function getHeight(){
            //     if(window.innerHeight){
            //         return window.innerHeight;
            //     }
            //     else{
            //         if(document.compatMode == "CSS1Compat"){
            //             return document.documentElement.clientHeight;
            //         }
            //         else{
            //             return document.body.clientHeight;
            //         }
            //     }
            // }
        }
    </script>
</body>
</html>